<template>
	<view class="wrap">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="收货地址" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body">
			
			<view class="top">
				<view class="item">
					<view class="left">收货人</view>
					<input v-model="detail.name" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
				</view>
				<view class="item">
					<view class="left">手机号码</view>
					<input v-model="detail.phone" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
				</view>
				<view class="item" @click="showRegionPicker">
					<view class="left">地址</view>
					<input v-model="detail.address" disabled type="text" placeholder-class="line" placeholder="请填写地址" />
				</view>
				<view class="item address">
					<view class="left">详细地址</view>
					<textarea v-model="detail.address_detail" type="text" placeholder-class="line" placeholder="楼号,单元..." />
				</view>
				
			</view>
			<view class="bottom">
				<view class="default">
					<view class="left">
						<view class="set">设置默认地址</view>
						<view class="tips">提醒：每次下单会默认推荐该地址</view>
					</view>
					<view class="right">
						<switch v-if="detail.label==1" checked color="#0B868E" @change="setDefault" />
						<switch v-if="detail.label==0" color="#0B868E" @change="setDefault" />
					</view>
				</view>
			</view>
			<view v-if="id!=0" style="margin-top:20rpx;background-color: #fff;padding:20rpx;color:#666;" @click="todel">
				<view class="va_m" style="display: inline-block;margin-right:20rpx;">
					<u-icon name="close-circle" color="#f00" size="25"></u-icon>
				</view>
				<text class="va_m">删除该条地址信息</text>
			</view>
			<view class="addSite" @click="toAddSite">
				<view class="add">
					确认提交
				</view>
			</view>
			<u-toast ref="uToast" />
			<u-select v-model="showselect" mode="mutil-column-auto" :list="columns" @confirm="confirm"></u-select>
			
		</view>
		
	</view>
</template>

<script>
import { editAddress,delAddress } from "@/service/shopservice.js";
var city = require('../../config/city.json')
export default {
	data() {
		return {
			id:0,
			detail:{
				name:'',
				phone:'',
				address:'',
				address_detail:'',
				label:0,
			},
			show: false,
			columns:[],
			showselect:false
		};
	},
	onLoad(options) {
		this.columns=city;
		this.id=options.id;
		if(options.id!=0){
			this.detail.name=options.name
			this.detail.phone=options.phone
			this.detail.address=options.address
			this.detail.address_detail=options.address_detail
			this.detail.label=options.label
		}
		
	},
	methods: {
		setDefault(e) {
			// console.log(e);
			if(e.detail.value){
				this.detail.label=1
			}else{
				this.detail.label=0
			}
		},
		showRegionPicker() {
			this.showselect = true;
		},
		
		// 回调参数为包含columnIndex、value、values
		confirm(e) {
			// console.log(e)
			this.showselect = false;
			this.detail.addressNo=[];
			for(var i=0;i<e.length;i++){
				this.detail.addressNo[i]=e[i].value;
				this.detail.address+=e[i].label;
			}
		},
		toAddSite(){
			editAddress({
				id:this.id,
				name:this.detail.name,
				phone:this.detail.phone,
				address:this.detail.addressNo,
				address_detail:this.detail.address_detail,
				label:this.detail.label
			}).then(res=>{
				// console.log(res)
				if(res.code==200){
					uni.showToast({
						title: res.msg,
						icon: "success",
						complete() {
							uni.navigateBack({
								delta: 1
							})
						}
					});
				}else{
					uni.showToast({
						title: res.msg,
						icon: "error",
						
					});
				}
			})
		},
		todel(){
			delAddress({rid:this.id}).then(res=>{
				if(res.code==200){
					uni.showToast({
						title: '删除成功',
						icon: "success",
						complete() {
							uni.navigateBack({
								delta: 1
							})
						}
					});
				}else{
					uni.showToast({
						title: res.msg,
						icon: "erroe",
						
					});
				}
			})
		}
		
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 0rpx 0;
			textarea {
				// width: 100%;
				height: 130rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
.addSite {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	line-height: 80rpx;
	position: absolute;
	bottom: 30rpx;
	left: 80rpx;
	background-color: #ff5500;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}
</style>
